<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限管理 - 人事管理系统</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Bootstrap图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }
        .footer {
            margin-top: 50px;
            padding: 20px 0;
            color: #6c757d;
            border-top: 1px solid #dee2e6;
        }
        .table-actions {
            white-space: nowrap;
        }
        .search-bar {
            margin-bottom: 20px;
        }
        .pagination {
            justify-content: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <div th:replace="~{layout/header :: navbar(active='permission')}"></div>

    <!-- 主要内容 -->
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2>权限管理</h2>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPermissionModal">
                        <i class="bi bi-plus-circle me-1"></i>新增权限
                    </button>
                </div>
                
                <!-- 搜索栏 -->
                <div class="card search-bar">
                    <div class="card-body">
                        <form id="searchForm" class="row g-3">
                            <div class="col-md-4">
                                <label for="permissionName" class="form-label">权限名称</label>
                                <input type="text" class="form-control" id="permissionName" name="name" placeholder="请输入权限名称">
                            </div>
                            <div class="col-md-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary me-2">
                                    <i class="bi bi-search me-1"></i>搜索
                                </button>
                                <button type="button" class="btn btn-secondary" id="resetBtn">
                                    <i class="bi bi-arrow-counterclockwise me-1"></i>重置
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- 权限列表 -->
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>权限名称</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="permissionTableBody">
                                    <!-- 权限数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增权限模态框 -->
    <div class="modal fade" id="addPermissionModal" tabindex="-1" aria-labelledby="addPermissionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPermissionModalLabel">新增权限</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addPermissionForm">
                        <div class="mb-3">
                            <label for="addPermissionName" class="form-label">权限名称</label>
                            <input type="text" class="form-control" id="addPermissionName" name="name" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="savePermissionBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑权限模态框 -->
    <div class="modal fade" id="editPermissionModal" tabindex="-1" aria-labelledby="editPermissionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editPermissionModalLabel">编辑权限</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editPermissionForm">
                        <input type="hidden" id="editPermissionId" name="id">
                        <div class="mb-3">
                            <label for="editPermissionName" class="form-label">权限名称</label>
                            <input type="text" class="form-control" id="editPermissionName" name="name" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="updatePermissionBtn">更新</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div class="modal fade" id="deletePermissionModal" tabindex="-1" aria-labelledby="deletePermissionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deletePermissionModalLabel">确认删除</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除这个权限吗？此操作不可逆。</p>
                    <p class="text-danger">注意：删除权限可能会影响已分配该权限的角色！</p>
                    <input type="hidden" id="deletePermissionId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div th:replace="~{layout/footer :: footer}"></div>
    
    <!-- 通用脚本 -->
    <div th:replace="~{layout/footer :: scripts}"></div>
    
    <!-- 权限管理脚本 -->
    <script>
        $(document).ready(function() {
            // 加载权限列表
            function loadPermissions(nameFilter = '') {
                // 发送AJAX请求获取权限列表
                $.ajax({
                    url: '/permissions/list',
                    type: 'GET',
                    success: function(response) {
                        if (response.code === 1) {
                            const permissions = response.data;
                            
                            // 清空表格
                            $('#permissionTableBody').empty();
                            
                            // 过滤权限数据
                            let filteredPermissions = permissions;
                            if (nameFilter) {
                                filteredPermissions = permissions.filter(permission => 
                                    permission.name.toLowerCase().includes(nameFilter.toLowerCase())
                                );
                            }
                            
                            // 遍历权限数据，构建表格行
                            if (filteredPermissions && filteredPermissions.length > 0) {
                                filteredPermissions.forEach(function(permission) {
                                    const row = `
                                        <tr>
                                            <td>${permission.id}</td>
                                            <td>${permission.name}</td>
                                            <td class="table-actions">
                                                <button class="btn btn-sm btn-primary edit-permission" data-id="${permission.id}">
                                                    <i class="bi bi-pencil"></i> 编辑
                                                </button>
                                                <button class="btn btn-sm btn-danger delete-permission" data-id="${permission.id}">
                                                    <i class="bi bi-trash"></i> 删除
                                                </button>
                                            </td>
                                        </tr>
                                    `;
                                    $('#permissionTableBody').append(row);
                                });
                            } else {
                                $('#permissionTableBody').append('<tr><td colspan="3" class="text-center">暂无数据</td></tr>');
                            }
                        } else {
                            alert('加载权限列表失败：' + response.msg);
                        }
                    },
                    error: function() {
                        alert('加载权限列表失败，请稍后再试');
                    }
                });
            }
            
            // 初始加载权限列表
            loadPermissions();
            
            // 保存新权限
            $('#savePermissionBtn').click(function() {
                const name = $('#addPermissionName').val();
                
                if (!name) {
                    alert('请填写权限名称');
                    return;
                }
                
                const permissionData = {
                    name: name
                };
                
                $.ajax({
                    url: '/permissions',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(permissionData),
                    success: function(response) {
                        if (response.code === 1) {
                            // 关闭模态框
                            $('#addPermissionModal').modal('hide');
                            // 重置表单
                            $('#addPermissionForm')[0].reset();
                            // 重新加载权限列表
                            loadPermissions();
                            alert('权限添加成功');
                        } else {
                            alert('权限添加失败：' + response.msg);
                        }
                    },
                    error: function() {
                        alert('权限添加失败，请稍后再试');
                    }
                });
            });
            
            // 编辑权限按钮点击事件
            $(document).on('click', '.edit-permission', function() {
                const permissionId = $(this).data('id');
                
                // 获取权限详情
                $.ajax({
                    url: '/permissions/' + permissionId,
                    type: 'GET',
                    success: function(response) {
                        if (response.code === 1) {
                            const permission = response.data;
                            $('#editPermissionId').val(permission.id);
                            $('#editPermissionName').val(permission.name);
                            $('#editPermissionModal').modal('show');
                        } else {
                            alert('获取权限详情失败：' + response.msg);
                        }
                    },
                    error: function() {
                        alert('获取权限详情失败，请稍后再试');
                    }
                });
            });
            
            // 更新权限
            $('#updatePermissionBtn').click(function() {
                const id = $('#editPermissionId').val();
                const name = $('#editPermissionName').val();
                
                if (!name) {
                    alert('请填写权限名称');
                    return;
                }
                
                const permissionData = {
                    id: parseInt(id),
                    name: name
                };
                
                $.ajax({
                    url: '/permissions',
                    type: 'PUT',
                    contentType: 'application/json',
                    data: JSON.stringify(permissionData),
                    success: function(response) {
                        if (response.code === 1) {
                            // 关闭模态框
                            $('#editPermissionModal').modal('hide');
                            // 重新加载权限列表
                            loadPermissions();
                            alert('权限更新成功');
                        } else {
                            alert('权限更新失败：' + response.msg);
                        }
                    },
                    error: function() {
                        alert('权限更新失败，请稍后再试');
                    }
                });
            });
            
            // 删除权限按钮点击事件
            $(document).on('click', '.delete-permission', function() {
                const permissionId = $(this).data('id');
                $('#deletePermissionId').val(permissionId);
                $('#deletePermissionModal').modal('show');
            });
            
            // 确认删除权限
            $('#confirmDeleteBtn').click(function() {
                const permissionId = $('#deletePermissionId').val();
                
                $.ajax({
                    url: '/permissions/' + permissionId,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.code === 1) {
                            // 关闭模态框
                            $('#deletePermissionModal').modal('hide');
                            // 重新加载权限列表
                            loadPermissions();
                            alert('权限删除成功');
                        } else {
                            alert('权限删除失败：' + response.msg);
                        }
                    },
                    error: function() {
                        alert('权限删除失败，请稍后再试');
                    }
                });
            });
            
            // 搜索表单提交
            $('#searchForm').submit(function(event) {
                event.preventDefault();
                const name = $('#permissionName').val();
                loadPermissions(name);
            });
            
            // 重置按钮点击事件
            $('#resetBtn').click(function() {
                $('#permissionName').val('');
                loadPermissions();
            });
        });
    </script>
</body>
</html> 